<template>
  <div class="page-container">
    <a-tabs v-model:active-key="activeType">
      <a-tab-pane key="1" title="结算方式管理">
        <div class="item-operator">
          <h2 v-if="status == 'view'">结算方式管理</h2>
          <a-button v-permission="'svms:system:general:randeaccount.edit'" v-if="status == 'view'" type="primary" @click.stop="editFn">
            编辑
          </a-button>
        </div>

        <div class="item-container">
          <DescriptionsInfo v-if="status == 'view'" :syetemList="sysdict" :enterpriseDetail="enterpriseDetail" :status="status" />
          <EditDescriptions v-else ref="basicInfoFormRef" :enterpriseDetail="enterpriseDetail" :status="status" />
        </div>
      </a-tab-pane>
      <a-tab-pane v-if="status == 'view'" key="2" title="操作记录">
        <OperateLog type="28" />
      </a-tab-pane>
    </a-tabs>
  </div>

  <page-form-footer cancelText="返回" :cancelFn="cancelFn" :ok-loading="okLoading" @ok="submitFn" v-if="status == 'edit'" />
</template>
<script setup lang="ts" name="IOAccountList">
  import EditDescriptions from './components/edit-descriptions.vue'
  import DescriptionsInfo from './components/descriptions-info.vue'

  import { ref, onActivated } from 'vue'
  import { getInExpAccountList, postInExpAccountSave } from '@/api/system/randeaccount'
  import { useSysDict } from '@/hooks/useDict'

  const basicInfoFormRef = ref()
  const status = ref('view')
  const okLoading = ref(false)
  const enterpriseDetail = ref<any[]>([])
  const activeType = ref('1')
  const sysdict = useSysDict(['in_exp_account_way']) as any

  const getRandeAccountList = async (params?: any) => {
    try {
      const response = await getInExpAccountList(params)
      const { result } = response
      result?.forEach((item: any) => {
        item.wayType.type = +item.wayType.type!
        item.wayType.way = +item.wayType.way!
        // 网络平台代收、网络平台代付、押金抵扣、退款抵扣违约金、不支持创建收付款账号及开户行
        item.cannotAdd = [1, 2, 4, -2].includes(item.wayType.way)
      })
      enterpriseDetail.value = result || []
    } catch (error) {
      console.log(error)
    }
  }

  const cancelFn = () => {
    status.value = 'view'
    getRandeAccountList()
  }

  const editFn = () => {
    status.value = 'edit'
  }

  const submitFn = (noticeSuccess: (msg?: string) => void) => {
    okLoading.value = true
    basicInfoFormRef.value
      .save()
      .then((response: any) => {
        console.log(response)
        postInExpAccountSave({ data: response })
          .then((res) => {
            console.log(res)
            noticeSuccess()
            status.value = 'view'
            getRandeAccountList()
          })
          .catch((err) => {
            console.log(err)
          })
          .finally(() => {
            okLoading.value = false
          })
      })
      .catch((err: any) => {
        console.log(err)
      })
      .finally(() => {
        okLoading.value = false
      })
  }

  // 获取数据，keep-alive详情状态刷新数据
  onActivated(() => {
    if (status.value == 'view') {
      getRandeAccountList()
    }
  })
</script>
<style scoped lang="less">
  .item-operator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    h2 {
      color: #1d2129;
      font-weight: bold;
      font-size: 16px;
    }
  }
  .item-container {
    margin-bottom: 40px;
  }
</style>
